<script>
import {addProducts, delProducts, getPage, goodsTypeList, suppliersList, updProducts} from "@/api/goodsNews";

export default{
    data(){
        return{
            queryParams:{
                name:null,
                categoryId:null,
                suppliersId:null,
                price:null,
                pageNum:1,
                pageSize:5,
                total:0,
                pages:0,
            },
            // 商品列表
            goodsList:[],
            categoriesList:[],
            suppliers:[],
            title:"",
            form:{
                // name:"",
                // price:0,
                // categoryId:0,
                // supplierId:0,
            },
            rules: {
                name: [
                    { required: true, message: "商品名称不能为空", trigger: "blur" }
                ],

                categoryId: [
                    { required: true, message: "供应商不能为空", trigger: "blur" }
                ],

                supplierId: [
                    { required: true, message: "产品分类不能为空", trigger: "blur" }
                ],
                description:[
                    { required: true, message: "描述不能为空", trigger: "blur" }
                ],
                price: [
                    { required: true, message: "出售单价不能为空", trigger: "blur" }
                ],
                purchasingPrice: [
                    { required: true, message: "进价单价不能为空", trigger: "blur" }
                ],
            },
            dialogVisible:false
        }
    },
    created(){
        let that = this
        that.selByAllPage()
        that.goodsType()
        that.supplier()
    },
    methods:{
        selByAllPage(){
            let that = this
            getPage(that.queryParams).then(function (res){
                if (res.code== 200){
                    that.goodsList = res.data.records
                    that.queryParams.total = res.data.total
                    that.queryParams.pages = res.data.pages
                    console.log(that.goodsList)
                }
            })
        },
        currentChange(val){
            let that = this
            that.queryParams.pageNum = val
            that.selByAllPage()
        },
        goodsType(){
            let that = this
            goodsTypeList().then(function (res){
                if (res.code == 200){
                    that.categoriesList = res.data
                }
            })
        },
        resetQuery(){
            window.location.reload()
        },
        supplier(){
            let that = this
            suppliersList().then(function (res){
                if (res.code == 200){
                    that.suppliers = res.data
                }else {
                    that.$message.error("获取供应商失败")
                }
            })
        },
        handleUpdate(data){
            let that = this
            that.title="编辑商品信息"
            that.dialogVisible = true
            that.form = data
            console.log(data)
        },
        handleDelete(id){
            let that = this
            that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delProducts(id).then(function (res){
                    if (res.code == 200){
                        that.$message.success("删除成功")
                        that.selByAllPage()
                    }else {
                        that.$message.error(res.mess)
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleAdd(){
            let that = this
            that.dialogVisible = true
            that.title = "添加商品信息"
            that.goodsType()
            that.supplier()
        },
        submitForm(form){
            let that = this
            that.$refs[form].validate((valid) => {
                if (valid) {
                    if (that.form.id!=null){
                        updProducts(that.form).then(function (res) {
                            if (res.code == 200) {
                                that.$message.success("修改成功")
                                that.dialogVisible = false
                                that.selByAllPage()
                            } else {
                                that.$message.error(res.mess)
                            }
                        })
                    }else {
                    addProducts(that.form).then(function (res) {
                        if (res.code == 200) {
                            that.$message.success("添加成功")
                            that.dialogVisible = false
                            that.selByAllPage()
                        }else {
                            that.$message.error(res.mess)
                        }
                    })
                    }
                }
            })
        },

        handleQuery(){
            let that = this
            that.queryParams.pageNum =1
            that.selByAllPage()

        }
    }
}
</script>

<template>
<div>
  <h4>基本信息</h4>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px" style="text-align: left;font-weight: bolder">
        <el-form-item label="商品名称" prop="name">
            <el-input
                    v-model="queryParams.name"
                        placeholder="请输入商品名称"
            />
        </el-form-item>


        <el-form-item label="产品分类" prop="categoryId">
            <el-select v-model="queryParams.categoryId" placeholder="请选择产品分类">
                <el-option label="--请选择分类--" value="0" key="0"></el-option>
                <el-option v-for="c in categoriesList" :label="c.name" :value="c.id"  :key="c.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="单价" prop="price">
            <el-input
                    v-model="queryParams.price"
                    placeholder="请输入单价"
                    clearable
            />
        </el-form-item>



        <el-form-item label="供应商" prop="supplierId">
            <el-select v-model="queryParams.suppliersId" placeholder="请选择供应商">
                <el-option label="--请选择供应商--" value="0" key="0"></el-option>
                <el-option
                        v-for="s in suppliers"
                        :label="s.name" :value="s.id" :key="s.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
          >新增</el-button>
        </el-form-item>
    </el-form>


<h4>商品信息</h4>
    <el-table
        :data="goodsList"
        style="width: 100%">
        <el-table-column
            prop="id"
            label="商品ID"
            align="center"
          >
        </el-table-column>
        <el-table-column
            prop="name"
            label="商品名称"
            align="center"
           >
        </el-table-column>
        <el-table-column
            prop="categoryName"
            label="分类名称">
        </el-table-column>
        <el-table-column
            prop="price"
            label="单价">
        </el-table-column>
        <el-table-column
            prop="stockQuantity"
            label="库存">
        </el-table-column>
        <el-table-column
            prop="supplierName"
            label="供应商">
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                >修改</el-button>
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row.id)"
                >删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="total,prev, pager, next, jumper"
        :total="queryParams.total"
        :page-size="queryParams.pageSize"
        :current-page="queryParams.pageNum"
        @current-change="currentChange"
    >
    </el-pagination>


    <el-dialog  style="font-weight: bold"   :destroy-on-close="true"
                :title="title" width="500px" :visible.sync="dialogVisible" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="供应商" prop="supplierId">
                <el-select v-model="form.supplierId" placeholder="请选择供应商">
                    <el-option
                        v-for="s in suppliers"
                        :label="s.name" :value="s.id" :key="s.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="产品分类" prop="categoryId">
                <el-select v-model="form.categoryId" placeholder="请选择产品分类">
                    <el-option
                        v-for="c in categoriesList"
                        :label="c.name" :value="c.id" :key="c.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="产品名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入商品名称" />
            </el-form-item>

            <el-form-item label="描述" prop="description">
                <el-input v-model="form.description" placeholder="请输入商品描述" />
            </el-form-item>

            <el-form-item label="进价单价" prop="purchasingPrice">
                <el-input v-model="form.purchasingPrice" placeholder="请输入单价" />
            </el-form-item>

            <el-form-item label="出售单价" prop="price">
                <el-input v-model="form.price" placeholder="请输入单价" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
    </el-dialog>


</div>
</template>

<style scoped>

</style>
